<template>
  <h2>今日已完成任务</h2>
  <ul class="tasks task-finished">
    <li class="task-item" v-for="(item, index) in finishedArray" :key="item.name">
      <span class="task-text">{{ item.name }}</span>
      <span class="flag-icon"></span>
    </li>
  </ul>
  <p>
    你已经对自己信守承诺<span class="keep-times">{{ keepTimes }}</span
    >次，继续加油哦！
  </p>
</template>
<script setup>
import { getCurrentInstance } from "vue";
import { useFinished, useKeepTimes } from "@/utils/useData.js";

const { proxy } = getCurrentInstance();
const { finishedArray } = useFinished(proxy);
const { keepTimes } = useKeepTimes(proxy);
</script>
<style lang="less" scoped src="@/styles/tasks.less"></style>
<style lang="less" scoped>
.flag-icon {
  display: inline-block;
  height: 20px;
  width: 20px;
  background: url("@/assets/flag.png") no-repeat;
  background-size: cover;
}
.keep-times {
  color: #31c27c;
  margin: 0 4px;
}
</style>
